<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="icon" href="<%= BASE_URL %>favicon.ico">
        <link rel="stylesheet" href="./test.css" type="text/css">
        <link rel="stylesheet" href="../src/assets/css/font-awesome.min.css">
        <title><%= htmlWebpackPlugin.options.title %></title>
            <style>
        *{
            margin:0 auto;
            padding: 0;
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        div{
            /*border: 1px solid black;*/
        }
        .header{
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            height: 70px;
            font-size: 22px;
            color: #fff;
            background-color: #242f42;
            position: relative;
        }
        .sidebar{
            
            width: 188px;
            background-color: rgb(50, 65, 87);
            height: 100%;
            position:absolute;
            top:70px;
            color:rgb(191, 203, 217);
            font-size: 15px;
        
        }
        .content-box{
            padding-bottom: 30px;
            -webkit-transition: left .3s ease-in-out;
            transition: left .3s ease-in-out;
            background: #f0f0f0;
            position:absolute;
            left: 188px;
            right:0;

            
           
            
        }


        .icon-button{
            line-height: 70px;
            cursor: pointer;
            float: left;
        }
        .logo{
            line-height: 70px;
            float: left;
          
        }
        .userinfo{
            line-height: 70px;
            float: right;
            padding-right: 88px;
            align-items: center;
            cursor: pointer;
            align-items: center;
        }
        .icon{
            display: inline-block;
            padding: 0 8px 0 21px;
            font-style: normal;
            font-size:32px;
            line-height: 2.2;
            display: inline-block;
            -webkit-font-smoothing: antialiased;
        }
        
/*----------------------sidebar------------------------------------*/

        .menulist{

            height: 100%;
            cursor: pointer;
        }
        .menulist>li>ul{
            display: none;
        }
        .menuitem{
            height: 56px;
            line-height: 56px;
            padding-left: 20px;
            position: relative;
        }
        .menuitem:hover{
            background-color: #242f42;
        }
        .isopened{
            transform: rotate(180deg);
            -webkit-transform: rotate(180deg);
        }

/*---------------------------contentbox----------------------------------------*/
        .teb{
            position: relative;
            height: 30px;
            overflow: hidden;
            background: #fff;
            padding-right: 120px;
            -webkit-box-shadow: 0 5px 10px #ddd;
            box-shadow: 0 5px 8px #ddd;
        }
        .teb-li{
            float: left;
            margin: 3px 5px 2px 3px;
            border-radius: 3px;
            font-size: 12px;
            overflow: hidden;
            cursor: pointer;
            height: 23px;
            line-height: 23px;
            border: 1px solid #e9eaec;
            background: #fff;
            padding: 0 5px 0 12px;
            vertical-align: middle;
            color: #666;
            -webkit-transition: all .3s ease-in;
            transition: all .3s ease-in;
        }
        .teb-li-title{
            float: left;
            max-width: 80px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-right: 5px;
            color: #666;
        }
        .teb-li-title:valid{
            color: #666;
        }
        .teb-li-title:link{
            color: #666;
        }
        .teb-li-active{
            border: 1px solid #409eff;
            background-color: #409eff;
            color: #fff;
        }
        .teb-title-active{
            color: #fff;
        }
    </style>
        </head>
        <body>
            <noscript>
                <strong><a href="">abc你的浏览器版本太低，请使用chrome浏览器，点我进行下载安装!!</a></strong>
            </noscript>
            <div id="app">
                <div class=wrapper>
                    <div class="header">
                        <div class="icon-button">
                            <i class="fa fa-home icon" aria-hidden="true"></i>
                        </div>
                        <div class="logo">后端管理系统</div>
                        <div class="userinfo">
                            <i class="fa fa-user-circle-o" style="font-size:
                                26px;" aria-hidden="true"></i>
                            <span style="font-size: 14px;">张三，你好啊</span>
                            <i class="fa fa-caret-down" style="font-size: 9px;"
                                aria-hidden="true"></i>
                        </div>
                    </div>



                    <div class="sidebar">
                        <ul class="menulist">
                            <li>
                                <div class="menuitem">
                                    <i class="fa fa-cube" aria-hidden="true"></i>
                                    <span>
                                        项目分类
                                    </span>
                                    <i class="fa fa-angle-down" style="position:absolute;top:40%;right:20px;" aria-hidden="true"></i>
                                </div>
                                <ul >
                                    <li class="menuitem" style="padding-left: 50px;">项目分类</li>
                                </ul>
                            </li>

                            <li>
                                <div class="menuitem">
                                    <i class="fa fa-cube" aria-hidden="true"></i>
                                    <span>
                                        项目分类
                                    </span>
                                    <i class="fa fa-angle-down" style="position:absolute;top:40%;right:20px;" aria-hidden="true"></i>
                                </div>
                                <ul >
                                    <li class="menuitem" style="padding-left: 50px;">项目分类</li>
                                </ul>
                            </li>
                            <li>
                                <div class="menuitem">
                                    <i class="fa fa-cube" aria-hidden="true"></i>
                                    <span>
                                        项目分类
                                    </span>
                                    <i class="fa fa-angle-down" style="position:absolute;top:40%;right:20px;" aria-hidden="true"></i>
                                </div>
                                <ul >
                                    <li class="menuitem" style="padding-left: 50px;">项目分类</li>
                                </ul>
                            </li>
                        </ul>

                    </div>

                    
                    <div class="content-box">
                        <div class="teb">
                            <ul>
                                <li class="teb-li teb-li-active">
                                    <a href="" class="teb-li-title teb-title-active" >故障报修</a>
                                    <i class="fa fa-times" aria-hidden="true"></i>
                                </li>
                                <li class="teb-li">
                                    <a href="" class="teb-li-title">故障报修</a>
                                    <i class="fa fa-times" aria-hidden="true"></i>
                                </li>
                                <li class="teb-li">
                                    <a href="" class="teb-li-title">故障报修</a>
                                    <i class="fa fa-times" aria-hidden="true"></i>
                                </li>
                            </ul>
                        </div>
                        <div class="contents">1</div>
                    </div>
                   
                </div>
                <div class="printDom"></div>
            </div>
        </body>
    </html>